<template>
  <div class="nav_continer" v-show="isNav">
    <div class="select_type_wrap" :class="seleted?'seleted':''">
      <p>
        <img ref="img" v-show="isUpImg"  :src="imgSrc" alt="">
      </p>

      <div v-show="!show_up_img">
        <p @click="up_load" v-show="isUpImg&&!select_loading">上传</p>
        <p @click="select_pat">拍照下单</p>
        <p @click="select_book">相册选择</p>
        <p @click="cancle_up">取消</p>
      </div>
    </div>

    <input style="display: none" type="file"   accept="image/*" ref="file_input1">
    <div class="nav_wrap">
      <ul>
        <router-link tag="li" class="tab-item" to="/index">
          <p></p>
          <div>首页</div>
          <b></b>
        </router-link>
        <router-link tag="li"  class="tab-item" to="/allClass">
          <p></p>
          <div>分类</div>
          <b></b>
        </router-link>
        <li @click="seleted=true">
          <p></p>
          <div>拍照下单</div>
        </li>
        <router-link tag="li"  class="tab-item" to="/shop_car">
          <p>
            <span v-show="carNumber" :class="carNumberClass">{{carNumber<1000?carNumber:999}}</span>
          </p>
          <div>购物车</div>
          <b></b>
        </router-link>
        <router-link tag="li"  class="tab-item" to="/my">
          <p></p>
          <div>我的</div>
          <b></b>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters, mapMutations} from 'vuex'
  import {up_photo_order} from 'api/order'
  import {get_cookie} from "assets/cookie/cookie";
  import exif from 'exif-js'

  export default {
    props: [],
    data() {
      return {
        router: "",
        blur_: true,
        mSearchVal: "",
        isNav:true,
        seleted:false,
        isUpImg:false,
        animate:false,
        imgSrc:'',
        show_up_img:false,  //是否显示上传框
        select_loading:false
      }
    },
    created() {
      switch (this.$route.path){
        case '/index':
        case '/my':
        case '/allClass':  this.isNav=true;
          break;
        default: this.isNav=false
      }
    },
    mounted() {
      this.band_change()
    },
    computed: {
      carNumberClass(){
        let c=''
        if(this.carNumber>99){
          c+='big'
        }
        if(this.animate){
          c+=' animate'
        }
        return c
      },
      ...mapGetters([
        'searchVal',
        'carNumber'
      ])
    },
    methods: {
      band_change(){
        this.$refs.file_input1.addEventListener("change",()=>{
          if(this.$refs.file_input1.files.length>0){
            this.select_loading=true
            this.isUpImg=true
            this.imgSrc=require('../assets/img/loading.png')
            this.huoqu_url(this.$refs.file_input1.files[0])
          }
        });
      },
      huoqu_url(file) {
        let form_reader = new FileReader();

          form_reader.onload = (e)=> {

            setTimeout(()=>{
              this.select_loading=false
              form_reader=null;
              this.imgSrc=e.target.result
              this.src=e.target.result
              this.file=file
              this.$refs.file_input1.value=''
              file=null;

            },20)
          };

        form_reader.readAsDataURL(file);
      },
      up_load(){
        if(!this.select_loading){
          this.show_up_img=true
          this.imgSrc=require('../assets/img/up_loading.png')
          setTimeout(()=>{
            let img=new Image();
            img.src=this.src
            img.addEventListener('load',()=> {
              let canvas = document.createElement('canvas');
              let context = canvas.getContext('2d');
              let size = 1200;
              let width;
              let height;
              if (img.width < size && img.height < size) {
                width = img.width
                height = img.height
              } else if (img.width > size && img.height < size) {
                width = size
                height = size * (img.height / img.width)
              } else if (img.width < size && img.height > size) {
                width = size * (img.width / img.height)
                height = size
              } else if (img.width > size && img.height > size && img.width > img.height) {
                width = size
                height = size * (img.height / img.width)
              } else {
                width = size * (img.width / img.height)
                height = size
              }

              let rotate;
              exif.getData(img, () => {
                exif.getAllTags(img)
                this.orientation = exif.getTag(img, 'Orientation')
                switch (this.orientation) {
                  case 6:
                    rotate = 1
                    break
                  case 8:
                    rotate = -1
                    break
                  case 3:
                    rotate = 3
                    break
                  default:
                    rotate = 0
                }
                switch (rotate) {
                  case 0:
                    canvas.width = width
                    canvas.height = height
                    context.drawImage(img, 0, 0, width, height)
                    break
                  case 1:
                  case -3:
                    // 旋转90度 或者-270度 宽度和高度对调
                    canvas.width = height
                    canvas.height = width
                    context.rotate(rotate * 90  * Math.PI / 180)
                    context.drawImage(img, 0, -height, width, height)
                    break
                  case 2:
                  case -2:
                    canvas.width = width
                    canvas.height = height
                    context.rotate(rotate * 90  * Math.PI / 180)
                    context.drawImage(img, -width, -height, width, height)
                    break
                  case 3:
                  case -1:
                    canvas.width = height
                    canvas.height = width
                    context.rotate(rotate * 90  * Math.PI / 180)
                    context.drawImage(img, -width, 0, width, height)
                    break
                  default:
                    canvas.width = width
                    canvas.height = height
                    context.drawImage(img, 0, 0, width, height)
                }
              })
              up_photo_order({
                token:get_cookie('key'),
                photo:canvas.toDataURL(this.file.type || 'image/png')
              }).then(res=>{
                this.show_up_img=false
                if(res.status===200&&res.data.resStatus===0){
                  this.seleted=false;
                  this.isUpImg=false;
                  this.setHint({
                    text:'上传成功',
                    isHint:true,
                    ok:true
                  })
                }else if(res.status===200&&res.data.resStatus===-1){
                  this.setLogin(false)
                  this.isUpImg=false;
                  this.seleted=false;
                  this.setHint({
                    text:res.data.message,
                    isHint:true,
                    ok:false
                  })
                }else{
                  this.setHint({
                    text:res.data.message,
                    isHint:true,
                    ok:false
                  })
                }
              }).catch(res=>{
                this.show_up_img=false
                this.isUpImg=false;
                this.setHint({
                  text:'上传失败',
                  isHint:true,
                  ok:false
                })
              })
              /*    canvas转为blob并上传*/
              // canvas.toBlob((blob)=> {
              //   let formData=new FormData();
              //   formData.append('token',get_cookie('key'))
              //   formData.append('photo',blob)
              //   console.log(blob)
              //   console.log(this.file)
              //   let xhr = new XMLHttpRequest();
              //   xhr.open('POST','https://apptest.mingpinjiancai.com/index.php/wechat/photo/add', true);
              //   xhr.onreadystatechange = ()=> {
              //     if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {  // 304未修改
              //      let res=JSON.parse(xhr.responseText)
              //       this.show_up_img=false
              //       if(res.resStatus===0){
              //         this.seleted=false;
              //         this.isUpImg=false;
              //         this.setHint({
              //           text:'上传成功',
              //           isHint:true,
              //           ok:true
              //         })
              //       }else{
              //             this.isUpImg=false;
              //             this.setHint({
              //               text:'上传失败',
              //               isHint:true,
              //               ok:false
              //             })
              //       }
              //     }
              //     if(xhr.readyState === 4 && !(xhr.status === 200 || xhr.status === 304)){
              //       this.show_up_img=false
              //       this.isUpImg=false;
              //       this.setHint({
              //         text:'上传失败',
              //         isHint:true,
              //         ok:false
              //       })
              //     }
              //   };
              //   xhr.send(formData);
              // },this.file.type||'image/png');
            })
          },30)
        }


      },
      cancle_up(){
        this.seleted=false
        this.isUpImg=false
      },
      select_pat(){
        this.$refs.file_input1.setAttribute("capture","camera")
        this.$refs.file_input1.click()
      },
      select_book(){
        this.$refs.file_input1.removeAttribute("capture")
        this.$refs.file_input1.click()
      },
      ...mapMutations({
        setHint: 'SET_HINT',
        setLogin:'SET_IS_LOGIN'
      })
    },
    components: {},
    watch: {
      carNumber(){
        this.animate=true
        setTimeout(()=>{
          this.animate=false
        },280)
      },
      '$route'(to, from) {
        switch (to.path){
          case '/index':
          case '/my':
          case '/allClass':  this.isNav=true;
            break;
          default: this.isNav=false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .nav_continer {
    background-color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 99;
    max-width: 768px;
    min-width: 320px;
    border-top: 1px solid #ccc;
  }

  .nav_wrap {
    width: 100%;
    margin: 0 auto;
    > ul {
      width: 100%;
      font-size: 15px;
      color: #666;
      opacity: 0.9;
      > li:nth-child(1){
        >p{
          background-image: url('../assets/img/main.png');
        }
      }
      > li:nth-child(1).router-link-active{
        >p{
          background-image: url('../assets/img/main_active.png');
        }
      }
      > li:nth-child(2){
        >p{
          background-image: url('../assets/img/class.png');
        }
      }
      > li:nth-child(2).router-link-active{
        >p{
          background-image: url('../assets/img/class_active.png');
        }
      }
      > li:nth-child(3){
        overflow: visible;
        >p{
          width: 40px;
          height: 40px;
          margin-top: -16px;
          margin-bottom: 10px;
          background-image: url('../assets/img/picture.png');
          transition:all 0.18s;
        }
        &:active{
          >p{
            transform: scale(1.2);
          }
        }
      }
      > li:nth-child(4){
        overflow: visible;
        >p{
          background-image: url('../assets/img/shoping_car.png');
          position: relative;
          >span{
            position: absolute;
            width: 22px;
            height: 22px;
            top: -13px;
            right: -12px;
            background-color: #f10;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 23px;
            letter-spacing: 0;
            font-weight: 900;
          }
          >.animate{
            animation:add_shop_car 0.28s
          }
          >.big{
            width: 28px;
            height: 28px;
            line-height: 29px;
            top: -16px;
            right: -15px;
          }
        }
      }
      > li:nth-child(4).router-link-active{
        >p{
          background-image: url('../assets/img/shoping_car_active.png');
        }
      }
      > li:nth-child(5){
        >p{
          background-image: url('../assets/img/my.png');
        }
      }
      > li:nth-child(5).router-link-active{
        >p{
          background-image: url('../assets/img/my_active.png');
        }
      }
      > li {
        padding-top: 10px;
        width: 20%;
        font-size: 12px;
        float: left;
        letter-spacing: 2px;
        position: relative;
        overflow: hidden;
        >p{
          margin: 0 auto;
          width: 29px;
          height: 29px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        > div {
          width: 100%;
          cursor: pointer;
          margin-top: 5px;
          margin-bottom: 5px;
        }
        > b {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 1px;
          height: 1px;
          border-radius: 40%;
          background:#eee;
          transform: scale(0);
          transition: transform 0.11s;
          z-index: -1;
        }
        &:active {
          > b {
            transform: scale(90);
          }
        }

      }
    }
  }
  .back{
    float: left;
    width: 67px;
    height: 31px;
    line-height: 31px;
    margin-top: 20px;
    color: #fff;
    font-size: 14px;
  }
  .select_type_wrap{
    transition: all 0.3s;
    opacity: 0;
    transform: translateX(-100%);
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    >p{
      width: 60%;
      margin: 10px auto;
      padding-top: 100%;
      position: relative;
      >img{
        max-width: 100%;
        z-index: -1;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
    >div{
      position: absolute;
      bottom: 10px;
      width: 100%;
      >p:nth-child(1){
        border-radius: 5px;
        margin-bottom: 10px;
      }
      >p:nth-child(2){
        border-bottom: 1px solid #ddd;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      >p:nth-child(3){
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-bottom: 10px;
      }
      >p:nth-child(4){
        border-radius: 5px;
      }
      >p{
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        color: #1aaaeb;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 14px;
      }
    }
  }
  .seleted{
    transform: translateX(0);
    opacity: 1;
  }
  .router-link-active {
    color: #1aaaeb;
  }


  @keyframes add_shop_car
  {
    /*0%{transform: rotateY(0deg)}*/
    /*50% {transform:rotateY(90deg)}*/
    /*100% {transform: rotateY(0deg)}*/
  }
</style>
